<template>
  <el-button
    size="mini"
    type="success"
    @click="acceptThis"
    :plain="issueAccepted && !acceptedThis"
    :loading="loading"
    :disabled="acceptedThis"
  >
    {{ issueAccepted && acceptedThis ? '已采纳' : '采纳回答' }}
  </el-button>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatIssue } from '@/views/issues/format';

export default {
  name: 'accept-answer',
  props: {
    comment: Object,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    ...mapState({ curIssue: 'currentIssue' }),
    acceptedThis() {
      return this.curIssue.acceptedComment.id === this.comment.id;
    },
    issueAccepted() {
      return !!this.curIssue.acceptedComment.id;
    },
  },
  methods: {
    ...mapActions({ setCurIssue: 'setCurrentIssue' }),
    acceptThis() {
      this.loading = true;
      this.$api.spaceIssues.accept({
        spaceId: this.$route.params.spaceId,
        issueId: this.$route.params.issueId,
        commentId: this.comment.id,
      }).then((res) => {
        this.$message.success('采纳成功');
        this.setCurIssue(formatIssue(res.data));
        this.$root.$emit('logChange', formatIssue(res.data));
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
